<!DOCTYPE HTML>
<html lang="zxx">

<head>
	<title>登录</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
	  <!-- 引入elementui样式 -->
	  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	  <!-- 引入vue -->
	  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	  <!-- 引入组件库 -->
	  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

	  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	  <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
	
</head>

<body>
	<div class="background-item"></div>
	<div class="main-bg" id="mian">
		<div class="header-item">
			<h2 style="color: white;">您好{{userInfo.username}}，欢迎使用11bank</h2>
			<el-button class="back-btn" @click="logout" type="primary">退出登录</el-button>
		</div>
		<div class="content-item">
			<el-dialog title="转入账户等信息请仔细核对！" class="tranfer-item" :visible.sync="transferVisible" :show-close="false"
			:before-close="handleClose" append-to-body>
					<el-form ref="transferForm" :model="transfer" :rules="transferRules">
						<el-form-item label="转出账户" prop="outId">
							<h3>{{transfer.outId}}</h3>
						</el-form-item>
						<el-form-item label="转入账户" prop="inId">
							<el-input v-model="transfer.inId" placeholder="请输入转出账户"></el-input>
						</el-form-item>
						<el-form-item label="转账金额" prop="amount">
							<el-input type="number" step="1" v-model="transfer.amount" placeholder="请输入转账金额"
							oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
						</el-form-item>
						<el-form-item label="业务摘要" prop="note">
							<el-input v-model="transfer.note"></el-input>
						</el-form-item>
					</el-form>
				  <template #footer>
					<span class="dialog-footer">
					  <el-button @click="transferVisible = false">取 消</el-button>
					  <el-button type="primary" @click="submitTransfer('transferForm')">转 账</el-button>
					</span>
				  </template>
			</el-dialog>
			<el-dialog title="流水记录查询" class="flow-item" :visible.sync="flowVisible" :show-close="false" append-to-body>
					<div style="display: flex; flex-direction: row;">
						<el-input v-model="tagId" placeholder="请输入查询账户"></el-input>
						<el-button type="primary" @click="selectFlow">查&nbsp;询</el-button>
						<el-button @click="selectMyFlow">查询本账户</el-button>
					</div>
					<el-table :data="flowList"
					style="width: 100%"
					:row-class-name="tableRowClassName"
					height="340">
					<el-table-column prop="flowId" label="交易编号"></el-table-column>
					<el-table-column prop="outId" label="转出账户"></el-table-column>
					<el-table-column prop="inId" label="转入账户"></el-table-column>
					<el-table-column prop="time" label="交易时间"></el-table-column>
					<el-table-column prop="amount" label="交易金额(元)"></el-table-column>
					</el-table>
			</el-dialog>
			<div class="user-info-item">
				<div>
					<div class="avatar">
					  <p class="avatar-font">{{userInfo.username.substring(0, 1)}}</p>
					</div>
				  </div>
				  <div>
					<div class="info-left-item">&nbsp;姓名：{{userInfo.username}}</div>
					<div class="info-left-item">&nbsp;性别：{{userInfo.gender}}</div>
					<div class="info-left-item">&nbsp;年龄：{{userInfo.age}}</div>
				  </div>
				  <div>
					<div class="info-right-item">&nbsp;身份证号：{{userInfo.Id}}</div>
					<div class="info-right-item">&nbsp;电话号码：{{userInfo.mobile}}</div>
					<div class="info-right-item">&nbsp;常住地址：{{userInfo.address}}</div>
				  </div>
			</div>
			<div class="account-item">
				<el-menu class="menu-style">
					<el-menu-item class="menu-item" v-for="(item,i) in accountList"
					:key="i"
					:index="i+''">
						账户卡号：{{item.cardId}}&nbsp;
						余额：{{item.show? item.salary : "****"}}
						<div class="btn-group">
							<el-button @click="setShow(i)" circle>{{item.show? "隐藏" : "显示"}}</el-button>
							<el-button @click="transferIt(i)">转账</el-button>
							<el-button @click="flowIt(i)">流水查询</el-button>
						</div>
					</el-menu-item>
				</el-menu>
				<div style="height: 6vh;"></div>
				
			</div>
			
		</div>
		<!-- copyright -->
		<div class="copyright">
			<h2>Copyright &copy; 2021 版权所有| by
				<a href="#">No.11 Group</a>
			</h2>
		</div>
		<!-- //copyright -->
	</div>

</body>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
new Vue({
    el:'#mian',
    data() {
		return {
			userInfo: {
				username: "杨振华",
				gender: "男",
				age: 22,
				Id: 533445199912124335,
				mobile: 15242425536,
				address: "XXXXXXXXXXXXXXX",
			},
			accountList: [
				{
					cardId: "4325325324325324325",
					salary: 4234.32,
					show: true
				},{
					cardId: "5325323432425324325",
					salary: 4234.32,
					show: false
				}
			],
			flowList: [
				{
					flowId: "432hj4hj2k34hj324hk32j432jk",
					inId: "4125163262435",
					outId: "61342432523532",
					time: "2021-07-13 T 18:58:21",
					amount: "3000",
					isMy: false
				},
				{
					flowId: "53h5253jkh53i2h5ui3k5h2k3j5",
					inId: "64364364354366",
					outId: "26345246264246",
					time: "2021-07-13 T 19:22:21",
					amount: "200",
					isMy: false
				},
				{
					flowId: "53h5253jkh53i2h5ui3k5h2k3j5",
					inId: "64364364354366",
					outId: "26345246264246",
					time: "2021-07-13 T 19:22:21",
					amount: "200",
					isMy: true
				},{
					flowId: "53h5253jkh53i2h5ui3k5h2k3j5",
					inId: "64364364354366",
					outId: "26345246264246",
					time: "2021-07-13 T 19:22:21",
					amount: "200",
					isMy: true
				},{
					flowId: "53h5253jkh53i2h5ui3k5h2k3j5",
					inId: "64364364354366",
					outId: "26345246264246",
					time: "2021-07-13 T 19:22:21",
					amount: "200",
					isMy: true
				},{
					flowId: "53h5253jkh53i2h5ui3k5h2k3j5",
					inId: "64364364354366",
					outId: "26345246264246",
					time: "2021-07-13 T 19:22:21",
					amount: "200",
					isMy: true
				}
			],

			transferRules: {
				outId: [
        			{ required: true, message: "请输入正确的转入账户" },
        			{ pattern: /^[0-9]{16,20}$/, message: "请输入正确的账户卡号" },
        		],
				amount: [
					{ required: true, message: "请输入转账金额" },
					{ pattern: /^\d+(\.\d{0,2})?$/, message: "转账金额只能到小数点后2位"}
				]
			},

			transfer: {
				inId: "",
				outId: "",
				amount: 0,
				note: ""
			},

			curCardId: "",
			tagId: "",

			transferVisible: false,
			flowVisible: false
			}
		
    },
	created() {
		var self = this;
		for(var i=0;i<15;i++){
			self.accountList.push({
				cardId: "4325325324325324325",
				salary: 4234.32,
				show: false
			});
		}
	},
	methods: {
		setShow(i){
			var self = this;
			self.accountList[i].show = !self.accountList[i].show;
		},
		logout(){
			var self = this;
			self.$confirm("确认退出登录？").then(() => {
				self.$message.success("退出登录成功！");
			}).catch( e => {

			});
		},
		transferIt(i){
			var self = this;
			
			self.transfer.inId = self.accountList[i].cardId;
			self.transfer.outId = "";
			self.transfer.amount = "";
			
			self.transferVisible = true;
			console.log(self.accountList[i].cardId)
		},
		flowIt(i){
			var self = this;
			self.flowVisible = true;
			self.curCardId = self.accountList[i].cardId;
		},
		submitTransfer(form) {
			var self = this;
			self.$refs[form].validate(validate=>{
			if(validate){
				//调用转账接口

				self.$message.success("转账成功！");
			}else {
				self.$message.warning("请检查错误信息！");
			}
			});
		},
		selectMyFlow(){
			var self = this;
		},
		selectFlow(){
			var self = this;
			var reg = /^[0-9]{16,20}$/;
			var r = self.tagId.match(reg);
			if(r != null){
				self.$message.success("查询成功！");
			}else {
				self.$message.warning("请检查账户卡号是否正确！");
			}
		},
		handleClose() {
			var self = this;
			self.$confirm("关闭此次转账？").then(() => {
				self.transferVisible = false;
			}).catch( e => {

			});
		},
		tableRowClassName({row, rowIndex}) {
			var self = this;
        	if (self.flowList[rowIndex].isMy) {
        	  return 'warning-row';
        	} else {
        	  return 'success-row';
        	}
      	}
	}
});
</script>
<!-- //script -->

</html>
